<template>
	<ul class="highlights">
		<li class="highlights-picture">
			<img src="../../assets/img/Group-11@2x@2x.png">
		</li>
		<li>
			<ul class="introduction-item">
				<li v-for="(item, index) in getBaseMsg.highlights">{{item}}</li>
			</ul>
		</li>
		<li class="detail-item">
			<h2>{{getBaseMsg.commodityTitle}}</h2>
			<img src="../../assets/img/Bitmap@3x.png">
			<p>{{getBaseMsg.commodityDescription}}</p>
		</li>
		<li></li>
	</ul>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		name: 'hightligts',
		computed: {
	  	...mapGetters([
	      'getBaseMsg'
	    ])
 		},
	}
</script>

<style scoped lang="scss">
	$marginVertical: 1rem;
	$marginHorizontal: 1.63rem;
	.highlights{
		margin: -$marginVertical $marginHorizontal;
		border-radius: 3px;
		.highlights-picture{
			text-align: center;
			transform: translateY(2.4rem);
		}
		.introduction-item{
			padding: 3.5rem 0 2rem 2rem;
			background: #FFF6F4;
			font-family: "PingFangSC-Regular";
			font-size: 1.28rem;
			color: #333333;
			line-height: 2rem;
			li::before {
			  content: "• ";
			  color: rgba(255,102,51,0.50);
			  font-size: 2rem;
			}
		}
		.detail-item{
			margin: 2rem 0 1.5rem 0;
			overflow: hidden;
			h2{
				text-align: center;
				margin-bottom: 1rem;
			}
			img{
				max-width: 100%; /*使得图片按照宽高比自适应显示*/
				max-height: 100%;
			}
			p{
				margin: $marginVertical 0;
				font-family: PingFangSC-Regular;
				font-size: 1.3rem;
				color: #777;
				line-height: 2rem;
			}
		}
	}
</style>